<template> 
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
           <el-row :gtuter="20" >
               <el-col :span="8">
                   <span class="demonstration">开始日期:</span>
                   <el-date-picker
                       type="date"
                       placeholder="选择开始日期"
                       value-format="yyyy-MM-dd"
                       v-model="listQuery.beginDate"></el-date-picker>
               </el-col>
               <el-col :span="8">
                   <span class="demonstration">结束日期:</span>
                   <el-date-picker
                       type="date"
                       value-format="yyyy-MM-dd"
                       placeholder="选择结束日期"
                       v-model="listQuery.endDate"></el-date-picker>
               </el-col>

               <el-button
                       style="float: right"
                       @click="handleSearchList()"
                       type="primary"
                       size="small">
                   查询结果
               </el-button>
               <el-button
                       style="float: right;margin-right: 15px"
                       @click="handleResetSearch()"
                       size="small">
                   重置
               </el-button>
           </el-row>
        </el-card>
        <div class="table-container">
            <el-table
                :data="list"
                border
                style="width: 100%">
                <el-table-column type="selection" width="60" align="center"></el-table-column>

                <el-table-column label="商品名称" prop="productName">
                    <template slot-scope="scope">
                        {{scope.row.productName }}
                    </template>
                </el-table-column>

                <el-table-column label="商品种类" prop="productCategoryName">
                    <template slot-scope="scope">
                        {{scope.row.productCategoryName }}
                    </template>
                </el-table-column>

                <el-table-column label="进价" prop="price">
                    <template slot-scope="scope">
                        {{scope.row.price }}
                    </template>
                </el-table-column>

                <el-table-column label="售价" prop="salePrice">
                    <template slot-scope="scope">
                        {{scope.row.salePrice }}
                    </template>
                </el-table-column>

                <el-table-column label="销售数量" prop="salesQuantity">
                    <template slot-scope="scope">
                        {{scope.row.salesQuantity }}
                    </template>
                </el-table-column>

                <el-table-column label="销售金额" prop="salesAmount">
                    <template slot-scope="scope">
                        {{scope.row.salesAmount }}
                    </template>
                </el-table-column>

                <el-table-column label="退货数量" prop="returnedQuantity">
                    <template slot-scope="scope">
                        {{scope.row.returnQuantity }}
                    </template>
                </el-table-column>

                <el-table-column label="退货金额" prop="returnedAmount">
                <template slot-scope="scope">
                    {{scope.row.returnAmount }}
                </template>
                </el-table-column>

                <el-table-column label="总数量" prop="totalQuantity">
                    <template slot-scope="scope">
                        {{scope.row.totalQuantity }}
                    </template>
                </el-table-column>

                <el-table-column label="总金额" prop="totalAmount">
                    <template slot-scope="scope">
                        {{scope.row.totalAmount }}
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[5,10,15]"
                    :current-page.sync="listQuery.pageNum"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template> 
<script>
    //将$都替换为$
    import {fetchList} from '@/api/report/reportSalesDay'

    const defaultListQuery = {
        keyword: null,
        pageNum: 1,
        pageSize: 5,
        status: 1,
        publishStatus: null,
        verifyStatus: null,
        productSn: null,
        productCategoryId: null,
        brandId: null,
        beginDate: null,
        endDate:null
    };

    export default {
        name: 'shopExpense', 
        data() {
            return {
                shops: [
                ],
               param:{
                    //0今天1昨天2最近7天 3本月
                    type:0,
                    //0热销
                    stype:1
               },
               dayAmount:{
                   xianjin:0,
                   zhifubao:0,
                   shuaka:0,
                   weixin:0,
                   yunshanfu:0,
                   yizhifu:0
               },
                listQuery: Object.assign({}, defaultListQuery),
                list: null,
                total: null,
                listLoading: true,
                selectProductCateValue: null,
                multipleSelection: [],
            }
        },
        created() {
        },
        filters: {
            formatCreateTime(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            }
        },
        beforeDestroy() {
        },
        methods: {
            getList() {

                this.listLoading = true;
                console.log(JSON.stringify(this.listQuery))
                fetchList(this.listQuery).then(response => {
                    console.log(JSON.stringify(response))
                    this.listLoading = false;
                    this.list = response.data.records;
                    this.total = response.data.total;
                }).catch(error => {
                    console.log(JSON.stringify(error))
                });
            },
            handleSizeChange(val) {
                this.listQuery.pageNum = 1;
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },

            handleSearchList() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            handleResetSearch() {
                this.selectProductCateValue = [];
                this.listQuery = Object.assign({}, defaultListQuery);
            },
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    .sa-col .el-radio{
        padding: 12px 10px;
    }
    .sa-col .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        color: #fff;
        background-color: red;
        border-color: red;
        -webkit-box-shadow: -1px 0 0 0 red;
        box-shadow: -1px 0 0 0 red;
    }
    .sa-col .el-radio-button__inner:hover {
        color: red;
    }

</style>
<style rel="stylesheet/scss" lang="scss" scoped>
    .app-container {
        padding: 25px;
    }
    .total-frame {
        border: 1px solid #DCDFE6;
        padding: 20px;
        height: 100px;
        border-radius: 5px;
    }
    .frame-c1{
        background:linear-gradient(left, rgb(252, 107, 89),rgb(252, 95, 85));
        color:#fff;
        line-height: 2;
    }
    .frame-c2{
        background:linear-gradient(left, rgb(252, 185, 65),rgb(252, 160, 71));
        color:#fff;
        line-height: 2;
    }
    .frame-c3{
        background:linear-gradient(left, rgb(108, 175, 255),rgb(92, 162, 255));
        color:#fff;
        line-height: 2;
    }
    .frame-c4{
        background:linear-gradient(left, rgb(121, 213, 177),rgb(95, 201, 219));
        color:#fff;
        line-height: 2;
    }
    .frame-c5{
        background:linear-gradient(left, rgb(250, 92, 114),rgb(253, 147, 73));
        color:#fff;
        line-height: 2;
    }
    .frame-c6{
        background:linear-gradient(left, rgb(118, 144, 244),rgb(67, 191, 233));
        color:#fff;
        line-height: 2;
    }
     .total-title {
        font-size: 14px;
    }

    .total-value {
        font-size: 18px;
    }
</style>


